<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>箭头函数和this指向</title>
</head>
<body>
<button>click</button>
<script>
    /*箭头函数有常见的 ‘简写体’ 或 ‘块体’
    * 在‘块体’中 必须使用明确的return语句
    * */
    var a = (x, y) => x * y;
    var b = (x, y) => { return x * y }

    var c = a => a > 0 ? 1 : 0;
    var d = (a, b) => a + b > 12 ? 10 : 0;

    function Person() {
        this.age = 0;
    //  构造函数的this指向自己的实例
        setInterval(function growUp() {
            // 普通函数中this指向window
            this.age++;
        }, 1000);
    }

    var p = new Person();


    function Person() {
        var that = this;
        that.age = 0;
        setInterval(function growUp() {
    //  普通函数可以通过变量绑定上一层构造函数的this
            that.age++;
        }, 1000);
    }
    var p = new Person();

    function Person(){
        this.age = 0;

        setInterval(() => {
            // 箭头函数没有自己的this指向，箭头函数可以继承上一层的构造函数this
            this.age++;
        }, 1000);
    }

    var p = new Person();


    function PersonX() {
        'use strict'
        this.age = 0;
        setInterval(()=>{
            //  严格模式中构造函数内 普通函数的this指向构造函数
            this.age++;
        }, 1000);
    }

    var px = new PersonX();

    var person = {
        name: 'tom',
        add: function(){
            // this指向该方法的拥有者->对象
            console.log(this)
        }
    }
    person.add()

    var btn = document.querySelector('button');
    btn.onclick = function(){
        // 在事件中this指向该事件的dom元素
        console.log(this)
    }


    'use strict';
    var obj = {
        i: 10,
        b: () => console.log(this.i, this),  //箭头函数没有定义this的绑定
        c: function() {
            console.log( this.i, this)
        }
    }
    obj.b(); // undefined, window
    obj.c(); // 10, {i: 10, b: ƒ, c: ƒ}

    /*
    * 在方法里调用 apply、 call
    * 用来扩展作用域 使用场景：*/

    // 数组之间追加
    var arr1 = ['a', 'b', { c: 1 }];
    var arr2 = ['d', 'e'];
    Array.prototype.push.call(arr1, arr2) // arr1  ->  ["a", "b", {…}, Array(2)]

    // 求最大值和最小值
    var nums = [1, 2, 5, 3];
    var max = Math.max.apply(Math, nums); // 5


</script>
</body>
</html>